<div class="container">
  <!-- WRAPPER -->
  <div class="container-header bg_common">
    <!-- 标题 -->
    <div class="top_title">
      <img class="container-header__title" src="{{deployUrl}}assets/img/end-year/nvshen/round-title-2.png" alt="晋级赛规则">
    </div>
    <!-- 规则 -->
    <div class="brief" style="margin-top: -0.7rem;margin-bottom:-1rem;">
      <p>
        1、晋级赛100进64，比赛时间为12月14日00:00:00~23:59:59，仅限成功晋级的100名主播参与；
      </p>
      <p>
        2、比赛开始后榜单数据<strong>从0统计荣耀值</strong>，主播需在开播状态下在本直播间收礼才可获得荣耀值，1钻石=1荣耀值，收到宝箱礼物按照宝箱开出的礼物实际价格统计，收到神秘商店产出的礼物按1钻石=1.5荣耀值统计
      </p>
      <p>
        3、最终榜单<strong>前64名</strong>主播晋级下一赛段其余主播淘汰，晋级的主播将获得「年度64强」封面标签，有效期至活动结束；
      </p>
    </div>
  </div>
  <!-- MAIN -->
  <!-- MAIN -->
  <div class="bg_common" style="margin-bottom: 1.5rem;">
    <!-- 海选赛已结束 -->
    <div class="container-main__end" *ngIf="!haveOver">
      <img src="{{deployUrl}}assets/img/end-year/common/area-1.png" alt="">
    </div>
    <!-- TOP3 -->
    <div class="container-main__top3" [ngClass]="{end_ac: !haveOver}"
      [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/shenhao/shenhao-top3-bg.png)'">
      <!-- TOP3-1,2,3 -->
      <div class="top3-item" *ngFor="let anchor of top3List,let i = index" [ngClass]="'top3-'+(i+1)">
        <div class="top3--avatar"
        (click)="gotoRoom(anchor,'anchor')"
          [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/top'+(i+1)+'.png)'">
          <img [src]="anchor.avatarUrl | headImg" [alt]="anchor.nickname">
          <img class="detail-avatar__live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}" alt="直播中" *ngIf="anchor.liveStatus">
        </div>
        <div class="top3--nickname">{{anchor.nickname}}</div>
        <div class="top3--value">荣耀值:{{anchor.score}}</div>
        <!-- top-1 不展示距上名 展示mvp标签 -->
        <div class="top3--gap" *ngIf="i!==0&&!haveOver">{{anchor.rankDesc}}</div>
        <div class="top3--gap" *ngIf="haveOver" style="color: #80FFF3;">已晋级</div>
        <div class="top3--tag" *ngIf="i===0&&!haveOver">
          <img src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
        </div>
      </div>
    </div>
    <!-- OTHERS -->
    <div class="container-main__others">
      <div class="others-header"
        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-header-bg.png)'">
        <div class="index">排名</div>
        <div class="detail">主播信息</div>
        <div class="value">{{haveOver?'晋级情况':'荣耀值'}}</div>
      </div>
      <div class="others-main" *ngIf="othersList.length">
        <!-- item -->
        <div *ngFor="let anchor of othersList; let i=index">
          <img src="{{deployUrl}}assets/img/end-year/common/area-2.png" alt="" *ngIf="i===61&&!haveOver">
          <div class="others-main__item"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg.png)'">
            <div class="index">{{i+4}}</div>
            <div class="detail">
                <div class="detail-avatar" (click)="gotoRoom(anchor,'anchor')">
                  <img  [src]="anchor.avatarUrl | headImg"
                    [alt]="anchor.nickname">
                    <img class="live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}" alt="直播中" *ngIf="anchor.liveStatus">
                </div>
              <div class="detail-info">
                <div class="detail-info--name" (click)="gotoRoom(anchor,'anchor')">{{anchor.nickname}}</div>
                <div class="detail-info--gap">
                  {{haveOver?anchor.score + '荣耀值':anchor.rankDesc}}
                </div>
              </div>
            </div>
            <div class="value">{{haveOver?(i<61?'已晋级':'已淘汰'):anchor.score}}</div>
          </div>
        </div>
        <!-- spinner -->
        <div class="getmore" *ngIf="othersList.length&&!onRefrash">
          <span>没有更多了</span>
        </div>
      </div>
      <div *ngIf="!othersList.length" class="not_li">
        <p>暂无数据</p>
      </div>
    </div>
    <div class="container-footer">
      <p *ngIf="!isAndroid && !isPC">声明：本活动与Apple Inc.无关</p>
      <p>请用户注意，适度娱乐，理性消费</p>
    </div>
  </div>
  <div class="myself">
    <div class="index" *ngIf="currentAnchorInfo.rank">{{currentAnchorInfo.rank}}</div>
    <div class="index" *ngIf="!currentAnchorInfo.rank">{{currentAnchorInfo.rankDesc==='无参赛资格'?'-':'未上榜'}}</div>
    <div class="detail">
      <img class="detail-avatar" [src]="currentAnchorInfo.avatarUrl | headImg" alt="">
      <div class="detail-info">
        <div class="detail-info--name">{{currentAnchorInfo.nickname}}</div>
        <div class="detail-info--gap" *ngIf="haveOver">
          <span *ngIf="!(!currentAnchorInfo.rank&&currentAnchorInfo.rankDesc==='无参赛资格')">{{currentAnchorInfo.score + '荣耀值'}}</span>
          <span *ngIf="!currentAnchorInfo.rank&&currentAnchorInfo.rankDesc==='无参赛资格'">{{currentAnchorInfo.rankDesc}}</span>
        </div>
        <div class="detail-info--gap" *ngIf="!haveOver">
          <span *ngIf="currentAnchorInfo.rank!==1">
            {{currentAnchorInfo.rankDesc}}
          </span>
          <img *ngIf="currentAnchorInfo.rank===1" src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
        </div>
      </div>
    </div>
    <div class="value">
      {{haveOver?((currentAnchorInfo.rank<=64&&currentAnchorInfo.rank>0)?'已晋级':(currentAnchorInfo.rankDesc==='无参赛资格'?currentAnchorInfo.score:'已淘汰')):currentAnchorInfo.score}}</div>
  </div>
</div>
<!-- 刷新 -->
<div class="loader" *ngIf="onRefrash">
  <div class="loader-inner">
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
  </div>
</div>
